/**
 * 音乐播放器
 * */

import React, {Component} from 'react';
import {StyleSheet, FlatList, Button, Text, View, TouchableHighlight, RefreshControl, Image} from 'react-native';
import MusicPlayer from "./widget/MusicPlayer";

export default class DemoMusicPlayer extends Component {
    //设置顶部导航栏的内容
    static navigationOptions = ({navigation, screenProps}) => ({
        //左侧标题
        headerTitle: '音乐播放器',
        //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
        headerBackTitle: null,
        //顶部标题栏的样式
        headerStyle: styles.headerStyle,
        //顶部标题栏文字的样式
        headerTitleStyle: styles.headerTitleStyle,
    });

    constructor(props) {
        super(props);
        this.flatList = '';
        this.musicPlayer = '';
        //state状态，一旦改变，控件就会刷新
        this.state = {
            list: [{
                name: '可不可以',
                singer: '张紫豪',
                album: '可不可以',
                imageUrl: "http://y.gtimg.cn/music/photo_new/T002R300x300M000004VR1w241uBhB.jpg?max_age=2592000",
                mp3Url: "https://m128.xiami.net/51/2110669051/2104010889/1805541658_1536808380672.mp3?auth_key=1539572400-0-0-2a5e25ab5970f33739d3bd17ac33ab5b",

            }, {
                name: '去年夏天',
                singer: '王大毛',
                album: '去年夏天',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003eyd0o3lYmxM.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/128/2110327128/2103952198/1805029661_1535685717722.mp3?auth_key=1539572400-0-0-d2afeaf660ae76ca613b9508d7c12007',
            }, {
                name: '魔鬼中的天使',
                singer: '田馥甄',
                album: '爱了很久的朋友',
                imageUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M000002ZG1PE0iw36O.jpg?max_age=2592000',
                mp3Url:'https://m128.xiami.net/523/78523/2103651600/1802756798_1523265323481.mp3?auth_key=1539572400-0-0-25f23baed580520aaee8f59c3d43be55'
            }, {
                name: '像我这样的人',
                singer: '毛不易',
                album: '像我这样的人',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000001n7a82gh6IY.jpg?max_age=2592000',
                mp3Url: 'http://dl.stream.qqmusic.qq.com/C40000375L600p9sxv.m4a?guid=355966670&vkey=F9D0041A15FE313BAFC134B6F801ADDF68855EE16E9EEA149818C7F8CA8EE2B240CE48EAD3042FAADDC0879181EE4D9673E48DBD02D55B3A&uin=0&fromtag=66',
            }, {
                name: '初恋情人',
                singer: '刘小慧',
                album: 'In Your Dream',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000039Nig50o1aY9.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/936/1936/10625/131053_713499_l.mp3?auth_key=1539572400-0-0-45f787ee2cbf7a55a9ffbe14cbb85a30',
            }, {
                name: '笑看风云',
                singer: '郑少秋',
                album: '笑看风云',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R150x150M000000qE3kp0Ufado.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/239/1239/6383/78271_13701185_l.mp3?auth_key=1539572400-0-0-6edd758cb63ec337ebf7f66d919bf664',
            }, {
                name: '两男一女',
                singer: '方力申/杨彩华/陈晓东',
                album: '百分百主题曲',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002mBSGu0mrshf.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/218/218/32726/390271_60386220_l.mp3?auth_key=1539572400-0-0-63edfe2385e158ad5d1f3a5b1b1e5535',
            }, {
                name: ' 还你门匙',
                singer: '余文乐',
                album: 'Private Room',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002YcncC2qFsrq.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/128/1128/5644/68873_1514019557675.mp3?auth_key=1539572400-0-0-b3389cef909fc1689babb00578863dee',
            }, {
                name: '园游会',
                singer: '周杰伦',
                album: '七里香',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003DFRzD192KKD.jpg?max_age=2592000',
                mp3Url: 'https://m128.xiami.net/260/1260/6648/376013_1508219233437.mp3?auth_key=1539572400-0-0-5ac5e1af1015876c79341b49ce627a27',
            }, {
                name: '为你我受冷风吹',
                singer: '胡彦斌',
                album: '太歌',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003f2csz26yPNf.jpg?max_age=2592000',
                mp3Url: 'http://isure.stream.qqmusic.qq.com/C400002MLrR025Eo6P.m4a?guid=355966670&vkey=AA64DDE5A0FBA1C4604073760B30944A46F1FA6CFA299CBA986567C0CA6B8A5FE20E76BB6893EB22EB3B55DBC7C2A1EF0C6D644CDB2E9106&uin=0&fromtag=66',
            }, {
                name: '你爱我像谁',
                singer: '张卫健',
                album: '剧力万钧主题曲',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000B8QSW029LZp.jpg?max_age=2592000',
                mp3Url: 'http://219.135.57.145/amobile.music.tc.qq.com/C400002GiI8831vE1a.m4a?guid=355966670&vkey=D2CCB3026B6FE93F1308350B18F2E3F00D3D90140060710C8E92E922BFD4E6AFE33096B98F0C8546A0E6E2D147C72EB633715F7CB43C3C21&uin=0&fromtag=66',
            }, {
                name: '修炼爱情',
                singer: '林俊杰',
                album: '因你而在',
                imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001gqOnU3DTg2S.jpg?max_age=2592000',
                mp3Url: 'http://isure.stream.qqmusic.qq.com/C400002CxSLT41D5tD.m4a?guid=355966670&vkey=CDFC056174D6BE5284AE2214B897CDBB62C1FC87F7E5C9677001D4E2B0A02F62AB58B193C108AA14899E6AF6A2B48B2C3324F28B896F7E54&uin=0&fromtag=66',
            }],//音乐列表
        position: 0,//当前播放位置
        };
    }

    componentDidMount() {

    }

    render() {
        return (
            <View style={styles.root}>
                <MusicPlayer
                  ref={ref => this.musicPlayer = ref }
                  musicList = {this.state.list}//往子控件传递数据
                  position = {this.state.position}
                  onMusicChange = {this._onMusicChange.bind(this)}
                />
                <FlatList
                    ref={ref => this.flatList = ref}
                    keyExtractor={(item, index) => index.toString()}
                    data={this.state.list}
                    extraData={this.state}
                    renderItem={this._renderItem.bind(this)}
                    ItemSeparatorComponent={this._ItemSeparator.bind(this)}
                />
            </View>
        );
    }

    _ItemSeparator() {
        return <View style={{backgroundColor: '#DCDCDC', height: 1, marginLeft: 60}}/>
    }

    _onMusicChange(playPos) {
        this.setState({
            position: playPos,
        });
    }

    _renderItem(item) {

        //动态显示view
        let playStateView = item.index === this.state.position ?
            <Image source={require('./image/ic_item_play.png')} style={{width: 26, height: 26}}/> : null;

        return (
            //渲染item
            <TouchableHighlight underlayColor='#CFCFCF' onPress={() => {
                //切换歌曲
                this.setState({
                    position: item.index
                });
                //父控件调用子控件方法
                this.musicPlayer.playMusic(item.index);
            }}>
                <View style={styles.container}>
                    <View style={{width: 60, justifyContent: 'center', alignItems: 'center',}}>
                        <Text style={{fontSize: 22}}> {item.index} </Text>
                    </View>

                    <View style={{width: 0, flexGrow: 4, flexDirection: 'column'}}>
                        <Text style={{fontSize: 18, marginTop: 16}}>{item.item.name}</Text>
                        <Text style={{fontSize: 14, marginTop: 6}}>{item.item.singer + "-" + item.item.album}</Text>
                    </View>

                    <View style={{width: 0, flexGrow: 1, justifyContent: 'center', alignItem: 'center'}}>
                        {playStateView}
                    </View>

                </View>
            </TouchableHighlight>
        );
    }
}


const styles = StyleSheet.create({
    root: {
        flex: 1,
        flexDirection: 'column-reverse',
    },
    container: {
        flex: 1,
        height: 80,
        flexDirection: 'row',

    },
    headerStyle: {
        backgroundColor: '#4398ff',
    },
    headerTitleStyle: {
        //标题的文字颜色
        color: 'white',
        //设置标题的大小
        fontSize: 18,
        //居中显示
        alignSelf: 'center',
    },
});